<template>
	<view class="wrapper order order-safe-area">
		<view class="order-box">
			<view class="order-item main-flex" v-if="info.salesmanName">
				<view class="order-item-l main-flex">
					<text class="order-item-name">客户经理：</text>
					<text class="order-item-text">{{info.salesmanName}}</text>
				</view>
				<view class="order-item-r main-flex">
					<text class="order-item-name">联系电话：</text>
					<text class="order-item-text">{{info.salesmanPhone}}</text>
					<!-- <image class="order-item-icon" @click="copyText(info.salesmanPhone)" src="/static/images/icon/copy.png"></image> -->
					<image class="order-item-icon" @click="callPhone(info.salesmanPhone)" src="/static/images/icon/call.png"></image>
				</view>
			</view>
			<view class="order-item main-flex">
				<view class="order-item-l main-flex">
					<text class="order-item-name">配送仓：</text>
					<text class="order-item-text">{{info.warehouseName}}</text>
				</view>
				<view class="order-item-r main-flex">
					<text class="order-item-name">配送电话：</text>
					<text class="order-item-text">{{info.warehousePhone}}</text>
					<!-- <image class="order-item-icon" @click="copyText(info.warehousePhone)" src="/static/images/icon/copy.png"></image> -->
					<image class="order-item-icon" @click="callPhone(info.warehousePhone)" src="/static/images/icon/call.png"></image>
				</view>
			</view>
			<view class="order-item main-flex">
				<view class="order-item-r main-flex-item main-flex">
					<text class="order-item-name">客服电话：</text>
					<text class="order-item-text">{{setStore?.sys?.customer_service}}</text>
					<!-- <image class="order-item-icon" @click="copyText(setStore?.sys?.customer_service)" src="/static/images/icon/copy.png"></image> -->
					<image class="order-item-icon" @click="callPhone(setStore?.sys?.customer_service)" src="/static/images/icon/call.png"></image>
				</view>
			</view>
		</view>
		
		<view class="order-box" v-if="express.nu">
			<view class="express-item main-flex" @click="goExpress">
				<image class="express-item-icon" mode="heightFix" src="/static/images/icon/send.png"></image>
				<text class="express-item-text">{{express.companyName}}</text>
				<text class="express-item-text">{{express.nu}}</text>
				<uni-icons class="express-item-right" type="right" size="20" color="#333333"></uni-icons>
			</view>
			<view class="express-item" v-if="express?.data?.[0]">
				<view class="express-item-context">{{express.data[0].context}}</view>
				<view class="express-item-time">{{express.data[0].time}}</view>
			</view>
		</view>
		<view class="order-box" v-if="info.status === 2 && !express.nu">
			<view class="express-item">
				<view class="express-item-start">订单配送中</view>
			</view>
		</view>
		
		<view class="order-box">
			<view class="order-item main-flex">
				<uni-icons class="order-item-send" type="location" size="20" color="#333333"></uni-icons>
				<text class="order-item-text1">{{info.contacts}}</text>
				<text class="order-item-text1">{{info.addrPhone}}</text>
			</view>
			<view class="order-item main-flex">
				<text class="order-item-name">地址：{{info.addressDetail}}</text>
			</view>
		</view>
		
		<view class="order-box">
			<view class="order-item main-flex">
				<view class="order-item-r main-flex-item main-flex">
					<text class="order-item-name">订单编号：</text>
					<text class="order-item-text">{{info.orderNumber}}</text>
					<image class="order-item-icon" @click="copyText(info.orderNumber)" src="/static/images/icon/copy.png"></image>
				</view>
			</view>
			<view class="order-item main-flex">
				<view class="order-item-r main-flex-item main-flex">
					<text class="order-item-name">下单时间：</text>
					<text class="order-item-text">{{info.createTime}}</text>
				</view>
			</view>
			<view class="order-item main-flex" v-if="info?.capitalDetail?.createTime">
				<view class="order-item-r main-flex-item main-flex">
					<text class="order-item-name">付款时间：</text>
					<text class="order-item-text">{{info.capitalDetail.createTime}}</text>
				</view>
			</view>
			<view class="order-item main-flex" v-if="info?.sendTime">
				<view class="order-item-r main-flex-item main-flex">
					<text class="order-item-name">发货时间：</text>
					<text class="order-item-text">{{info.sendTime}}</text>
				</view>
			</view>
			<view class="order-item main-flex" v-if="info?.capitalDetail?.remark">
				<view class="order-item-r main-flex-item main-flex flex-start">
					<text class="order-item-name">支付方式：</text>
					<text class="order-item-text main-flex-item">{{info.capitalDetail.remark}}</text>
				</view>
			</view>
			<view class="order-item main-flex" v-if="info?.remark">
				<view class="order-item-r main-flex-item main-flex flex-start">
					<text class="order-item-name">备注：</text>
					<text class="order-item-text main-flex-item">{{info?.remark}}</text>
				</view>
			</view>
		</view>
		
		<view class="order-box">
			<view class="goods-item main-flex" v-for="(item, index) in productList" :key="index">
				<view class="goods-item-l">
					<image class="goods-item-pic" :src="imgUrl(item.productImg)" lazy-load></image>
				</view>
				<view class="goods-item-c main-flex-item">
					<view class="goods-item-name">{{item.productName}}</view>
					<view class="goods-item-count">数量：{{item.number}}</view>
					<view class="goods-item-price">单价：￥{{item.price}}/{{item.productUnit}}</view>
				</view>
				<view class="goods-item-r main-flex">
					<view class="goods-item-money">￥{{moneyStr(item.money)}}</view>
				</view>
			</view>
		</view>
		
		<view class="order-box">
			<view class="money-item main-flex">
				<view class="money-item-name">商品总额</view>
				<view class="money-item-num">￥{{info?.originalPrice || '0.00'}}</view>
			</view>
			<view class="money-item main-flex">
				<view class="money-item-name">运费</view>
				<view class="money-item-num">￥{{info?.freight || '0.00'}}</view>
			</view>
			<view class="money-item main-flex">
				<view class="money-item-name">优惠券</view>
				<view class="money-item-num">-￥{{info?.discountPrice || '0.00'}}</view>
			</view>
			<view class="money-item main-flex">
				<view class="money-item-name">专享折扣折</view>
				<view class="money-item-num">-￥{{info?.balancePrice || '0.00'}}</view>
			</view>
			<view class="money-item main-flex">
				<view class="money-item-name">实付款</view>
				<view class="money-item-num price">￥{{info?.actualPrice || '0.00'}}</view>
			</view>
			<view class="money-item main-flex" v-if="info.status === 4">
				<view class="money-item-name">已退款</view>
				<view class="money-item-num price">￥{{info?.refundPrice || '0.00'}}</view>
			</view>
		</view>
		
		<view class="order-btns safe-area" v-if="info.id">
			<view class="order-btns-box main-flex">
				<view class="order-btns-status" :class="`order-status${info.status}`">{{arrText(orderStatusList, info.status)}}</view>
				<button @click="cancelOrder" class="ty-button ty-button-plain-cancel order-btns-btn" v-if="info.status === 0">取消订单</button>
				<button @click="payOrder" class="ty-button ty-button-plain-confirm order-btns-btn" v-if="info.status === 0">立即付款</button>
				<button @click="goExpress" class="ty-button ty-button-plain-warning order-btns-btn" v-if="info.status === 2">查看物流</button>
				<button @click="confirmReceipt" class="ty-button ty-button-plain-confirm order-btns-btn" v-if="info.status === 2">确认收货</button>
				<button @click="goService" class="ty-button ty-button-plain-confirm order-btns-btn service">
					<image class="order-btns-btn-icon" src="/static/images/icon/weixin.png"></image>
					<text>联系售后</text>
				</button>
			</view>
		</view>
		
		<pay
			:showPay="showPay"
			:order="info"
			@success="successPay"
			@close="closePay"></pay>
		
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide, onUnload, onBackPress } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { throttle, debounce, sleep } from '@/uni_modules/uview-plus'
import { orderDetail, orderCancel, orderExpress, orderConfirmReceipt } from "@/api/app_api/order"
import { Decimal } from 'decimal.js'
import modal from '@/plugins/modal'
import { orderStatusList } from '@/utils/config'
import { arrText, serviceWeixin } from '@/utils/ty'

	const userStore = useUserStore()
	const setStore = useSetStore()
	
	const id = ref('')
	const orderNumber = ref('')
	onLoad((option) => {
		id.value = option?.id || ''
		orderNumber.value = option?.ordernumber || ''
		if (id.value || orderNumber.value) {
			getDetail()
		}
	})
	const info = ref({})
	const productList = ref([])
	const getDetail = () => {
		uni.showLoading({
			title: '数据加载中...'
		})
		orderDetail({
			id: id.value,
			orderNumber: orderNumber.value
		}).then(res => {
			info.value = res.data
			if (res.data?.expressNumber) {
				orderExpressDetail()
			}
			if (res.data?.productList) {
				productList.value = res.data.productList.map(item => {
					return {
						...item,
						money: Decimal(item.price).mul(Decimal(item.number)).toNumber()
					}
				})
			}
			uni.hideLoading()
		}).catch(() => {
			uni.hideLoading()
		})
	}
	
	// 获取物流信息
	const express = ref({})
	const orderExpressDetail = () => {
		orderExpress({
			id: id.value
		}).then(res => {
			express.value = res?.data || {}
		})
	}
	
	// 取消订单
	const cancelOrder = () => {
		uni.showModal({
			title: '取消订单',
			content: '确认取消此订单吗？',
			success: function (res) {
				if (res.confirm) {
					cancelOrderFun()
				} else if (res.cancel) {
					
				}
			}
		})
	}
	const isCancel = ref(false)
	const cancelOrderFun = () => {
		if (isCancel.value) return false
		isCancel.value = true
		orderCancel({
			id: id.value
		}).then(res => {
			uni.$u.toast('订单已取消')
			uni.$u.sleep(1000).then(() => {
				isCancel.value = false
				uni.navigateBack({
					delta: 1
				})
				uni.$emit('refresh');  // 触发刷新事件
			})
		}).catch(() => {
			isCancel.value = false
		})
	}
	
	// 确认收货
	const confirmReceipt = () => {
		uni.showModal({
			title: '确认收货',
			content: '确认收到货物了吗？',
			success: function (res) {
				if (res.confirm) {
					confirmReceiptFun()
				} else if (res.cancel) {
					
				}
			}
		})
	}
	const isConfirmReceipt = ref(false)
	const confirmReceiptFun = () => {
		if (isConfirmReceipt.value) return false
		isConfirmReceipt.value = true
		orderConfirmReceipt({
			id: id.value
		}).then(res => {
			uni.$u.toast('订单已收货')
			uni.$u.sleep(1000).then(() => {
				isConfirmReceipt.value = false
				uni.navigateBack({
					delta: 1
				})
				uni.$emit('refresh');  // 触发刷新事件
			})
		}).catch(() => {
			isConfirmReceipt.value = false
		})
	}
	
	// 客服
	const goService = () => {
		serviceWeixin()
	}
	
	// 查看物流
	const goExpress = () => {
		uni.navigateTo({
			url: `/pages/order/express?id=${id.value}`
		})
	}
	
	// 支付相关
	const isPayOrder = ref(false)
	const showPay = ref(false)
	const orderInfo = ref({})
	const payOrder = () => {
		showPay.value = true
	}
	const closePay = () => {
		showPay.value = false
	}
	const successPay = () => {
		getDetail()
		uni.$emit('refresh');  // 触发刷新事件
	}
	
	watch(() => userStore.user.id, (nval, oval) => {
		if (nval) {
			getDetail()
		}
	})
	
</script>

<style lang="scss">
	.order {
		padding: 20rpx;
		&-box {
			border-radius: 20rpx;
			background-color: #ffffff;
			padding: 20rpx;
			&+.order-box {
				margin-top: 20rpx;
			}
		}
		&-item {
			font-size: 24rpx;
			&+.order-item {
				margin-top: 10rpx;
			}
			&-l {
				width: 280rpx;
			}
			&-name {
				color: $text-light;
			}
			&-send {
				margin-right: 20rpx;
			}
			&-text {
				// flex: 1;
				overflow: hidden;
				word-break: break-all;
			}
			&-text1 {
				font-size: 28rpx;
				margin-right: 20rpx;
			}
			&-icon {
				width: 32rpx;
				height: 32rpx;
				margin-left: 20rpx;
			}
		}
		.goods-item {
			align-items: flex-start;
			&+.goods-item {
				margin-top: 20rpx;
			}
			&-l {
				width: 160rpx;
				height: 160rpx;
				overflow: hidden;
				border-radius: 10rpx;
			}
			&-pic {
				width: 160rpx;
				height: 160rpx;
			}
			&-c {
				padding: 0 10rpx;
			}
			&-r {
				height: 160rpx;
				align-items: center;
				padding: 0 10rpx;
			}
			&-name {
				font-size: 26rpx;
				font-weight: 600;
				word-break: break-all;
			}
			&-count {
				font-size: 24rpx;
				color: $text-light;
				margin-top: 4rpx;
			}
			&-price {
				font-size: 24rpx;
				color: $text-light;
				margin-top: 4rpx;
			}
			&-money {
				font-size: 32rpx;
				color: $primary-color;
				text-align: right;
			}
		}
		.money-item {
			&+.money-item {
				margin-top: 10rpx;
			}
			&-name {
				font-size: 26rpx;
			}
			&-num {
				font-size: 28rpx;
				color: #000000;
				font-weight: 600;
				margin-left: auto;
			}
			.price {
				font-size: 32rpx;
			}
		}
		&-btns {
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
			background-color: #ffffff;
			box-sizing: border-box;
			&-box {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
				justify-content: flex-end;
			}
			&-status {
				margin-left: auto;
				color: $primary-color;
				font-size: 30rpx;
				font-weight: 600;
				margin-right: auto;
				margin-left: 0rpx;
			}
			.status5 {
				color: $text-light;
			}
			&-btn {
				width: 150rpx;
				height: 48rpx;
				background-color: #ffffff;
				padding: 0;
				margin: 0;
				font-size: 20rpx;
				justify-content: center;
				margin-left: 20rpx;
				border-radius: 24rpx;
				&-icon {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
				&+.service {
					display: none;
				}
			}
		}
		.express-item {
			&+.express-item {
				margin-top: 20rpx;
			}
			&-start {
				font-size: 40rpx;
				font-weight: 600;
			}
			&-icon {
				height: 28rpx;
				margin-right: 20rpx;
			}
			&-text {
				font-size: 28rpx;
				margin-right: 20rpx;
			}
			&-right {
				margin-left: auto;
			}
			&-context {
				font-size: 24rpx;
				color: $text-light;
			}
			&-time {
				font-size: 24rpx;
				color: $text-light;
				text-align: right;
			}
		}
	}
	.order-safe-area {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 108rpx); /* 兼容iOS <11.2 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 108rpx); /* 兼容iOS ≥11.2 */
	}
</style>
